<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs ace-save-state" id="breadcrumbs">
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">首页</a>
				</li>
                <li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">餐饮管理</a>
				</li>
				<li class="active">菜品介绍</li>
			</ul><!-- /.breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- /.nav-search -->
		</div>

		<div class="page-content">
			<div class="page-header">
				<h1>
					菜品介绍

					<div class="pull-right inline">
						<a href="#my-modal" role="button" class="bg-primary white btn btn-white btn-success btn-round" data-toggle="modal">
							<i class="ace-icon fa fa-pencil green2"></i> 
							增加
						</a>
						
						<div id="my-modal" class="modal fade" tabindex="-1">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h3 class="smaller lighter blue no-margin">增加记录</h3>
									</div>
						
									<div class="modal-body">
										<form class="form-horizontal" role="form">
											<div class="form-group">
												<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 名称 </label>
						
												<div class="col-sm-9">
													<input type="text" id="form-field-1" placeholder="" class="col-xs-10 col-sm-5" />
												</div>
											</div>
						
											<div class="form-group">
												<label class="col-sm-3 control-label no-padding-right" for="form-field-select-1"> 图片 </label>

												<div class="form-group">
													<div class="col-xs-6">
														<input multiple="" type="file" id="id-input-file-3" />
													</div>
												</div>
											</div>
										</form>
									</div>
						
									<div class="modal-footer">
										<button class="btn btn-sm btn-success" data-dismiss="modal">
											<i class="ace-icon fa fa-pencil"></i>
											确认
										</button>
										<button class="btn btn-sm btn-danger pull-right" data-dismiss="modal">
											<i class="ace-icon fa fa-times"></i>
											取消
										</button>
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal-dialog -->
						</div>

						<button class="btn btn-white btn-danger btn-round">
							<i class="ace-icon fa fa-times red2"></i>
							删除
						</button>
					</div>
				</h1>
			</div><!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div>
                        <ul class="ace-thumbnails clearfix">
							<?php 
							for ($x=0; $x<=11; $x++) {
								echo '<li>
										<a href="./dist/images/gallery/image-2.jpg" data-rel="colorbox">
											<img width="150" height="150" alt="150x150" src="../../../../public/static/assets/images/gallery/thumb-2.jpg" />
											<div class="text">
												<div class="inner">宫保鸡丁</div>
											</div>
										</a>
									</li>';
							}
							?>
                        </ul>
                    </div>
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div>
</div><!-- /.main-content -->

<script type="text/javascript">
	jQuery(function($) {	
		$('#id-input-file-3').ace_file_input({
			style: 'well',
			btn_choose: 'Drop images here or click to choose',
			btn_change: null,
			no_icon: 'ace-icon fa fa-picture-o',
			allowExt: ["jpeg", "jpg", "png", "gif" , "bmp"],
			allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"],
			droppable: true,
			thumbnail: 'small'//large | fit
			//,icon_remove:null//set null, to hide remove/reset button
			/**,before_change:function(files, dropped) {
				//Check an example below
				//or examples/file-upload.html
				return true;
			}*/
			/**,before_remove : function() {
				return true;
			}*/
			,
			preview_error : function(filename, error_code) {
				//name of the file that failed
				//error_code values
				//1 = 'FILE_LOAD_FAILED',
				//2 = 'IMAGE_LOAD_FAILED',
				//3 = 'THUMBNAIL_FAILED'
				//alert(error_code);
			}
	
		}).on('change', function(){
			//console.log($(this).data('ace_input_files'));
			//console.log($(this).data('ace_input_method'));
		});
	});
</script>